<template>
  <div class="page-header-index-wide page-header-wrapper-grid-content-main">
    <a-row :gutter="24">
      <a-col :md="24" :lg="7">
        <a-card :bordered="false">
          <div class="account-center-avatarHolder">
            <div class="avatar">
              <img src="/avatar2.jpg">
            </div>
            <div class="username">{{userInfo.realName}}</div>
            <div class="bio">一句话描述自己</div>
          </div>
          <!--<div class="account-center-detail">-->
            <!--<p>-->
              <!--<i class="title"></i>所属公司{{userInfo.companyName||'&#45;&#45;'}}-->
            <!--</p>-->
            <!--<p>-->
              <!--<i class="group"></i>蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED-->
            <!--</p>-->
            <!--<p>-->
              <!--<i class="address"></i>-->
              <!--<span>浙江省</span>-->
              <!--<span>杭州市</span>-->
            <!--</p>-->
          <!--</div>-->
          <a-divider/>

          <div class="account-center-tags">
            <div class="tagsTitle">标签</div>
            <div>
              <template v-for="(tag, index) in tags">
                <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
                  <a-tag
                    :key="tag"
                    :closable="index !== 0"
                    :afterClose="() => handleTagClose(tag)"
                  >{{ `${tag.slice(0, 20)}...` }}
                  </a-tag>
                </a-tooltip>
                <a-tag
                  v-else
                  :key="tag"
                  :closable="index !== 0"
                  :afterClose="() => handleTagClose(tag)"
                >{{ tag }}
                </a-tag>
              </template>
              <a-input
                v-if="tagInputVisible"
                ref="tagInput"
                type="text"
                size="small"
                :style="{ width: '78px' }"
                :value="tagInputValue"
                @change="handleInputChange"
                @blur="handleTagInputConfirm"
                @keyup.enter="handleTagInputConfirm"
              />
              <a-tag v-else @click="showTagInput" style="background: #fff; borderStyle: dashed;">
                <a-icon type="plus"/>
                New Tag
              </a-tag>
            </div>
          </div>
          <a-divider :dashed="true"/>

        </a-card>
      </a-col>
      <a-col :md="24" :lg="17">
        <a-card>
          <a-row :gutter="16">
            <a-col :md="24" :lg="16">
              <a-form :form="form" @submit="handleSubmit">
                <a-form-item label="用户名称" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                  <a-input v-decorator="[ 'realName',{rules: [{ required: true, message: '请输入用户名称!' }]} ]"/>
                </a-form-item>
                <a-form-item label="登录账号" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                  <a-input :disabled="true" v-decorator="[ 'username',{rules: []} ]"/>
                </a-form-item>
                <!--<a-form-item label="电话号码" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                  <a-input v-decorator="[ 'mobile',{rules: [{ required: true, message: '请输入电话号码!' }]} ]"/>
                </a-form-item>-->
                <a-form-item label="密码" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
                  <a-input type="password" v-decorator="[ 'password',{rules: [{ required: true, message: '请输入电话号码!' }]} ]"/>
                </a-form-item>
                <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
                  <a-button type="primary" html-type="submit">保存</a-button>
                  <a-button style="margin-left: 8px" v-if="userInfo.state==0" @click="showModal">授权微信登录</a-button>
                </a-form-item>
              </a-form>

            </a-col>

          </a-row>
        </a-card>

      </a-col>
    </a-row>

    <a-modal
      title="微信授权"
      v-model="visible"
      @ok="handleOk"
      width="460px"
    >
      <iframe id="google_ads_frame2" name="google_ads_frame2" width="400" height="400" frameborder="0" :src="codeHtml"
              marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no"
              allowfullscreen="true"></iframe>
    </a-modal>
  </div>
</template>

<script>
  import PageLayout from '@/components/page/PageLayout'
  import RouteView from '@/components/layouts/RouteView'
  import { AppPage, ArticlePage, ProjectPage } from './page'

  //分割线
  import { getInfo,updatePassword } from '../../../../api/system/user'
  import pick from 'lodash.pick'

  // import { mapGetters } from 'vuex'

  export default {
    components: {
      RouteView,
      PageLayout,
      AppPage,
      ArticlePage,
      ProjectPage
    },
    data() {
      return {
        tags: ['很有想法的', '专注设计', '辣~', '大长腿', '川妹子', '海纳百川'],
        tagInputVisible: false,
        tagInputValue: '',
        teamSpinning: true,
        noTitleKey: 'app',
        userInfo: {},
        //表单
        formLayout: 'horizontal',
        form: this.$form.createForm(this),

        //弹框
        visible: false,
        codeHtml: ''
      }
    },
    mounted() {
      this.getUserInfo()
    },
    methods: {
      // ...mapGetters(['nickname', 'avatar']),

      // getTeams () {
      //   this.$http.get('/workplace/teams').then(res => {
      //     this.teams = res.result
      //     this.teamSpinning = false
      //   })
      // },

      getUserInfo: function() {
        getInfo().then((res) => {
          this.userInfo = res.result
          this.$nextTick(() => {
            this.form.setFieldsValue(pick(this.userInfo, 'mobile', 'username', 'password', 'realName'))
          })
        })
      },

      handleTabChange(key, type) {
        this[type] = key
      },

      handleTagClose(removeTag) {
        const tags = this.tags.filter(tag => tag !== removeTag)
        this.tags = tags
      },

      showTagInput() {
        this.tagInputVisible = true
        this.$nextTick(() => {
          this.$refs.tagInput.focus()
        })
      },

      handleInputChange(e) {
        this.tagInputValue = e.target.value
      },

      handleTagInputConfirm() {
        const inputValue = this.tagInputValue
        let tags = this.tags
        if (inputValue && !tags.includes(inputValue)) {
          tags = [...tags, inputValue]
        }

        Object.assign(this, {
          tags,
          tagInputVisible: false,
          tagInputValue: ''
        })
      },


      //  表单
      handleSubmit(e) {
        e.preventDefault()
        const  _this = this;
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values)
            updatePassword(values).then((res) => {
              if (res.code === 200) {
                _this.$message.success('保存成功')
              }else {
                this.$notification.error({
                  message: '错误',
                  description: res.message,
                  duration: 4
                })
              }
            }).catch(() => {
              // Do something
            }).finally(() => {
            })
          }
        })
      },

      //弹框

      showModal() {
        // 页面跳转
        const baseUrl = this.$baseURL
        // this.codeHtml = baseUrl + '/wxopen/saoma?userId=' + this.userInfo.id + '&state=1&from=http://localhost:8080/account/center'
        //上线需要改成
        this.codeHtml = baseUrl + '/wxopen/saoma?userId=' + this.userInfo.id + '&state=1&from=http://www.alipayjf.com/account/center'
        this.visible = true
      },
      handleOk(e) {
        console.log(e)
        this.visible = false
      }
    }
  }
</script>

<style lang="less" scoped>
  .page-header-wrapper-grid-content-main {
    width: 100%;
    height: 100%;
    min-height: 100%;
    transition: 0.3s;

    .account-center-avatarHolder {
      text-align: center;
      margin-bottom: 24px;

      & > .avatar {
        margin: 0 auto;
        width: 104px;
        height: 104px;
        margin-bottom: 20px;
        border-radius: 50%;
        overflow: hidden;
        img {
          height: 100%;
          width: 100%;
        }
      }

      .username {
        color: rgba(0, 0, 0, 0.85);
        font-size: 20px;
        line-height: 28px;
        font-weight: 500;
        margin-bottom: 4px;
      }
    }

    .account-center-detail {
      p {
        margin-bottom: 8px;
        padding-left: 26px;
        position: relative;
      }

      i {
        position: absolute;
        height: 14px;
        width: 14px;
        left: 0;
        top: 4px;
        background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg);
      }

      .title {
        background-position: 0 0;
      }
      .group {
        background-position: 0 -22px;
      }
      .address {
        background-position: 0 -44px;
      }
    }

    .account-center-tags {
      .ant-tag {
        margin-bottom: 8px;
      }
    }

    .account-center-team {
      .members {
        a {
          display: block;
          margin: 12px 0;
          line-height: 24px;
          height: 24px;
          .member {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.65);
            line-height: 24px;
            max-width: 100px;
            vertical-align: top;
            margin-left: 12px;
            transition: all 0.3s;
            display: inline-block;
          }
          &:hover {
            span {
              color: #1890ff;
            }
          }
        }
      }
    }

    .tagsTitle,
    .teamTitle {
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      margin-bottom: 12px;
    }
  }
</style>
